<template>
  <div class="app-container">
    <!-- 第一排搜索卡片 -->
    <el-card class="box-card">
      <el-row style="font-size: 15px; line-height: 2em; color: #909399" :gutter="60">
        <el-col :span="6">
          <a>
            <img src="../static/主页/2.jpg" width="300px" height="180px" />
          </a>
        </el-col>
        <el-col :span="18">
          <el-form :model="itemFindByPage">
            <el-col :span="12">
              <div class="search">
                项目名称：<el-input v-model="itemFindByPage.etmsItem.trainTitle" placeholder="项目名称"></el-input>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="search">
                项目类别：<el-input v-model="itemFindByPage.etmsItem.trainType" placeholder="项目类别"></el-input>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="search">
                负责人：{{"\xa0\xa0\xa0\xa0"}}<el-input v-model="itemFindByPage.etmsItem.trainPrinc" placeholder="负责人"></el-input>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="search">
                培训状态：<el-input v-model="itemFindByPage.etmsItem.trainStatus" placeholder="培训状态"></el-input>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="search" style="margin-left:690px">
                <el-button type="primary" icon="el-icon-search" @click="getItemListBySearch">搜索</el-button>
              </div>
            </el-col>
          </el-form>
        </el-col>
      </el-row>
    </el-card>

    <!-- 第二排展示 -->
    <el-card class="box-card">
      <el-table :data="tableData" style="width: 100%" :header-cell-style="{'text-align':'center'}"
        :cell-style="{'text-align':'center'}">
        <el-table-column label="项目名称">
          <template slot-scope="scope">
            <span>{{ scope.row.trainTitle }}</span>
          </template>
        </el-table-column>
        <el-table-column label="项目类别">
          <template slot-scope="scope">
            <span>{{ scope.row.trainType }}</span>
          </template>
        </el-table-column>
        <el-table-column label="项目状态">
          <template slot-scope="scope">
            <span>{{ scope.row.trainStatus }}</span>
          </template>
        </el-table-column>
        <el-table-column label="负责人">
          <template slot-scope="scope">
            <span>{{ scope.row.trainPrinc }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button size="mini" @click="handleDetail(scope.$index, scope.row)">详情</el-button>
            <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)" :key="key">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
        :current-page="currentPage" :page-sizes="[5,10]" :page-size="100"
        layout="total, sizes, prev, pager, next, jumper" :total="total"
        style="margin-top: 30px; margin-bottom: 20px; text-align: center;">
      </el-pagination>
    </el-card>
  </div>
</template>

<script>
  import {getList} from '@/api/item'
  import {deleteOne} from '@/api/item'
  import {findById} from "@/api/item"

  export default {
    data() {
      return {
        key: 0,
        trainForm: "", 
        itemFindByPage: {
          page:1,
          limit:5,
          etmsItem:{
            trainTitle: "",
            trainType: "",
            trainPrinc: "",
            trainStatus: "",
          },
        },
        total:0,
        currentPage:1,
        tableData: {},
      }

    },
    created() {
      /* 获取查询列表 */
       this.getItemListBySearch(); 
    },
    methods: {
      handleUpdateClick() {
        this.key += 1 
      },
      getItemListBySearch() {
        getList(this.itemFindByPage).then(res => {
          console.log(res);
          this.tableData = res.data.list;
          this.currentPage = res.data.pageNum;
          this.total = res.data.total;
          //this.currentPage = res.data.page;
        })
      },
      handleSizeChange(val) {
        this.itemFindByPage.limit = val;
        getList(this.itemFindByPage).then(res => {
          console.log(res);
          this.tableData = res.data.list;
          this.currentPage = res.data.pageNum
        })
      },
      handleCurrentChange(val) {
        this.itemFindByPage.page = val;
        getList(this.itemFindByPage).then(res => {
          console.log(res);
          this.tableData = res.data.list;
          this.currentPage = res.data.pageNum
        })  
        console.log(`当前页: ${val}`);
      },

      handleDetail(index, row) {
      this.$router.push({
        name:'Manage',
        query:{
          itemId : row.itemId
        }
      })
      console.log(index, row.itemId);
      },

      handleDelete(index, row) {
        this.tableData.splice(index,1)
        deleteOne(row.itemId);
      }
    }
  }

</script>



<style scoped>
  .el-input {
    width: 250px;
  }

  .box-item {
    width: 75%;
    float: right;
  }

  .field-label {
    vertical-align: middle;
  }

  .box-card {
    width: 98%;
    max-width: 100%;
    margin: 20px auto;
  }

  .search {
    margin-top: 10px;
    width: 100%;
    display: flex;
    font-size: 15px;
    line-height: 50px;
  }

</style>
